<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-popover v-model="popoverVisible" placement="bottom" width="220" trigger="hover" :open-delay="1000" :close-delay="0"
    popper-class="node-popover">
    <div class="popover-container">
      <ul class="list">
        <li class="item">
          <span class="label">算子名称</span>
          <span class="text">{{ label }}</span>
        </li>
        <li v-if="desc" class="item">
          <span class="label">算子描述</span>
          <span class="text">{{ desc }}</span>
        </li>
        <li v-if="status" class="item">
          <span class="label">运行状态</span>
          <span class="text">
            <span class="node-state-icon" :class="status">
              <i :class="(operatorStatusIcon as any)[status]" />
            </span>
            <span class="state-text">{{ (instancesStateText as any)[status] }}</span>
          </span>
        </li>
      </ul>
    </div>
    <template #reference>
      <div class="xflow-algo-node" :class="{ 'node-desc': !!desc }">
        <span class="icon" :style="{ background: fill, borderColor: fill }">
          <svg-icon-file :icon-class="icon" />
        </span>
        <div class="center-container">
          <span class="label">{{ label }}</span>
          <span v-if="desc" class="desc">{{ desc }}</span>
        </div>
        <span v-if="isError" class="status node-state-icon Failed">
          <svg-icon icon-class="warning" />
        </span>
        <span class="status node-state-icon" :class="status">
          <svg-icon :icon-class="(operatorStatusIcon as any)[status]" />
        </span>
        <span v-if="isOldNode" class="isOldNode" />
      </div>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, inject } from "vue"
import SvgIconFile from 'src/pages/designerTool/workflow/svgIconFile2.vue'
import SvgIcon from 'src/components/SvgIcon.vue'
import { designerStore } from 'src/stores/designerTool/designerTool'
import { instancesStateText, operatorStatusIcon } from 'src/utils/designerTool/constants'
import { algoNodeValidate } from 'src/utils/designerTool/toole'
import { ElPopover } from "element-plus";
const store = designerStore()
const label = ref('')
const status = ref('')
const icon = ref('')
const fill = ref('')
const desc = ref('')
const popoverVisible = ref(false)
const isError = ref(false)
const isOldNode = ref(false)
const getGraph = inject('getGraph')
const getNode:any = inject('getNode')
const categoriesParent = computed(() => {
  return store.categoriesParent
})
const categoriesSubset = computed(() => {
  return store.categoriesSubset
})
onMounted(() => {
  const node = getNode()
  const nodeData = node.getData()
  const nodeInfo = categoriesSubset.value[nodeData.id]
  if (nodeInfo) {
    label.value = nodeInfo.label
    isOldNode.value = nodeInfo.isOldNode || false
    const parentIcon = categoriesParent.value[nodeInfo.parentId]
    if (parentIcon) {
      icon.value = parentIcon.icon
      fill.value = parentIcon.fill
    }
  }
  desc.value = nodeData.desc
  status.value = nodeData.status
  validate()
  // 监听数据改变事件
  node.on('change:data', ({ current }:any) => {
    status.value = current.status.replace(/( |^)[a-z]/g, (L: any) => L.toUpperCase())
    desc.value = current.desc
    if (current.dataType === 'updateConfig') {
      validate()
    }
  })
})
function validate() {
  console.log()
  // isError.value = algoNodeValidate(getNode) === 'form'
}

</script>

<style lang="scss" scoped>
@import "src/css/designerStyles/index.scss";
@import './algo-node.scss';
</style>
